<template>
  <div>
    <van-tabbar
      v-model="active"
      route
      active-color="#ee0a24"
      inactive-color="#ccc"
    >
      <van-tabbar-item to="/found">
        <span>发现</span>
        <template #icon="props">
          <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
          <i
            class="iconfont"
            :class="props.active ? 'icon-wangyiyunyinle' : 'icon-logo-dark'"
          ></i>
        </template>
      </van-tabbar-item>

      <van-tabbar-item to="/search">
        <span>搜索</span>
        <template #icon="props">
          <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
          <i
            class="iconfont"
            :class="props.active ? 'icon-boke1-copy' : 'icon-boke'"
          ></i>
        </template>
      </van-tabbar-item>

      <van-tabbar-item to="/focusin">
        <span>MV</span>
        <template #icon="props">
          <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
          <i
            class="iconfont"
            :class="props.active ? 'icon-yinlemusic215' : 'icon-yinle'"
          ></i>
        </template>
      </van-tabbar-item>

      <!-- <van-tabbar-item to="/focusin" icon="friends-o">关注</van-tabbar-item> -->

      <van-tabbar-item to="/mine">
        <span>我的</span>
        <template #icon="props">
          <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
          <i
            class="iconfont"
            :class="
              props.active
                ? 'icon-farendaibiao'
                : 'icon-farendaibiao'
            "
          ></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup>
import { ref } from 'vue'
let active = ref(0)
</script>
<style></style>
